<script setup lang="ts">
  // import { onBeforeUnmount, reactive, ref } from "vue";

  // 并不能响应式
  const msg = "一段普通文本";

  // 一般用作简单类型的定义，比如string number
  // 定义对象或数组也是可以，但仍通过 obj.value.age读取
  // ref方法 实际返回一个RefImpl类型的对象，本质仍是 reactive
  // 在 RefImpl 对象中 _value 通过 toReactive 获取 reactive 返回的代理对象
  let count = 0;
  let refMsg = ref("ref文本");

  let timer: NodeJS.Timeout | null = setInterval(() => {
    count++;
    const text = count % 2 ? "一段ref文本，setInterval调用不停更改中" : "这样使用：refMsg.value = '一段新的文本'";
    refMsg.value = text;
  }, 2000);

  onBeforeUnmount(() => {
    if (timer) {
      clearInterval(Number(timer));
    }
  });

  const obj = reactive({
    name: "reactiveApi",
    count: 0,
  });
</script>

<template>
  <div>
    <div>{{ msg }}</div>
    <van-divider />
    <div>{{ refMsg }}</div>
    <div>定时器也将在 onBeforeUnmount 中清除</div>
    <van-divider />
    <div>{{ obj.count }}</div>
  </div>
</template>
